<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>下拉菜单</title>
<meta name="Generator" content="EditPlus" charset="UTF-8">
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/components.css">
<link rel="stylesheet" href="css/components-theme.css">
<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<style>
.btn-group > .btn + .dropdown-toggle {
  padding-right: 8px;
  padding-left: 8px;
  height:34px  /* 添加此高度：分裂下拉高度展现只有一半，现指定高度来处理*/
}
</style>
</head>

<body>
	<div class="bs-docs-section">
		<h1 id="btn-dropdowns" class="page-header">下拉菜单</h1>
		<p class="lead">将下拉菜单触发器和下拉菜单都包裹在 <code>.dropdown</code> 里，或者另一个声明了 <code>position: relative;
			</code> 的元素。然后加入组成菜单的 HTML 代码。
		</p>
		<div class="bs-callout bs-callout-danger" id="callout-btndropdown-dependency">
			<h4>Plugin dependency</h4>
			<p>下拉菜单需要bootstrap包含<a href="../javascript/#dropdowns">dropdown plugin</a>组件</p>
		</div>

		<h3 id="btn-dropdowns-single">单下拉菜单</h3>
		<h5 id="btn-dropdowns-single">B默认情况下，下拉菜单自动沿着父元素的上沿和左侧被定位为 100% 宽度。 为 .dropdown-menu 添加 
		 	.dropdown-menu-right 类可以让菜单右对齐。</h5>
		<div class="dropdown">
			<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true">
				Dropdown
    			<span class="caret"></span>
  			</button>
  			<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
    			<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
    			<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
    			<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
    			<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
  			</ul>
		</div>
		<h5 id="btn-dropdowns-single">从 v3.1.0 版本开始，我们不再建议对下拉菜单使用 .pull-right 类。如需将菜单右对齐，请使用 
			.dropdown-menu-right 类。导航条中如需添加右对齐的导航（nav）组件，请使用 .pull-right 的 mixin 版本，可以自动对齐菜单。
			如需左对齐，请使用 .dropdown-menu-left 类</h5>
			
		<h3 id="btn-dropdowns" class="page-header">单按钮下拉菜单</h3>	
		<h5>为下拉菜单添加一条分割线，用于将多个链接分组。</h5>
		<div class="bs-example" data-example-id="single-button-dropdown">
			<div class="btn-group">
				<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
					Default <span class="caret"></span>
				</button>
				<ul class="dropdown-menu" role="menu">
					<li><a href="#">Action</a></li>
					<li class="divider"></li>
					<li><a href="#">Another action</a></li>
					<li><a href="#">Something else here</a></li>
					<li><a href="#">Separated link</a></li>
				</ul>
			</div>
			<!-- 其它下拉菜单样式 -->
			<div class="btn-group">
				<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
					Primary <span class="caret"></span>
				</button>
				<ul class="dropdown-menu" role="menu">
					<li><a href="#">Action</a></li>
					<li><a href="#">Another action</a></li>
					<li class="divider"></li>
					<li><a href="#">Something else here</a></li>
					<li><a href="#">Separated link</a></li>
				</ul>
			</div>
			<div class="btn-group">
				<button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
					Success <span class="caret"></span>
				</button>
				<ul class="dropdown-menu" role="menu">
					<li><a href="#">Action</a></li>
					<li><a href="#">Another action</a></li>
					<li><a href="#">Something else here</a></li>
					<li class="divider"></li>
					<li><a href="#">Separated link</a></li>
				</ul>
			</div>
			<div class="btn-group">
				<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
					Info <span class="caret"></span>
				</button>
				<ul class="dropdown-menu" role="menu">
					<li><a href="#">Action</a></li>
					<li><a href="#">Another action</a></li>
					<li><a href="#">Something else here</a></li>
					<li class="divider"></li>
					<li><a href="#">Separated link</a></li>
				</ul>
			</div>
			<!-- /btn-group -->
			<div class="btn-group">
				<button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
					Warning <span class="caret"></span>
				</button>
				<ul class="dropdown-menu" role="menu">
					<li><a href="#">Action</a></li>
					<li><a href="#">Another action</a></li>
					<li><a href="#">Something else here</a></li>
					<li class="divider"></li>
					<li><a href="#">Separated link</a></li>
				</ul>
			</div>
			<!-- /btn-group -->
			<div class="btn-group">
				<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
					Danger <span class="caret"></span>
				</button>
				<ul class="dropdown-menu" role="menu">
					<li><a href="#">Action</a></li>
					<li><a href="#">Another action</a></li>
					<li><a href="#">Something else here</a></li>
					<li class="divider"></li>
					<li><a href="#">Separated link</a></li>
				</ul>
			</div>
		</div>
		
		<h3>标题</h3>
        <p>在任何下拉菜单中均可通过添加标题来标明一组动作。</p>
        <div class="btn-group">
			<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
					Danger <span class="caret"></span>
			</button>
			<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu2">
				<li><a href="#"  class="dropdown-header" >请选择菜单</a></li>
				<li><a href="#">Another action</a></li>
				<li><a href="#">Something else here</a></li>
				<li class="divider"></li>
				<li><a href="#">Separated link</a></li>
			</ul>
		</div>
		
        <h3>禁用的菜单项</h3>
        <p>为下拉菜单中的 <li> 元素添加 .disabled 类，从而禁用相应的菜单项。</p>
		<div class="btn-group">
			<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
				Danger <span class="caret"></span>
			</button>
			<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu3">
 		 		<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Regular link</a></li>
  				<li role="presentation" class="disabled"><a role="menuitem" tabindex="-1" href="#">不可选</a></li>
  				<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another link</a></li>
			</ul> 
		</div> 
        
		<h3 id="btn-dropdowns-split">分裂式按钮下拉菜单</h3>
		<p>相似地，分裂式按钮下拉菜单也需要同样的改变一些标记，但只是多一个分开的按钮</p>
		<div class="bs-example" data-example-id="split-button-dropdown">
			<div class="btn-group" >
				<button type="button" class="btn btn-default">Default</button>
				<button type="button" class="btn btn-default dropdown-toggle" style="height:34px;"  data-toggle="dropdown" aria-expanded="false">
					<span class="caret"></span> 
					<span class="sr-only">Toggle Dropdown</span>
				</button>
				<ul class="dropdown-menu" role="menu">
					<li><a href="#">Action</a></li>
					<li><a href="#">Another action</a></li>
					<li><a href="#">Something else here</a></li>
					<li class="divider"></li>
					<li><a href="#">Separated link</a></li>
				</ul>
			</div>
			<!-- /btn-group -->
			<div class="btn-group">
				<button type="button" class="btn btn-primary">Primary</button>
				<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
					<span class="caret"></span> 
					<span class="sr-only">Toggle Dropdown</span>
				</button>
				<ul class="dropdown-menu" role="menu">
					<li><a href="#">Action</a></li>
					<li><a href="#">Another action</a></li>
					<li><a href="#">Something else here</a></li>
					<li class="divider"></li>
					<li><a href="#">Separated link</a></li>
				</ul>
			</div>
			<!-- /btn-group -->
			<div class="btn-group">
				<button type="button" class="btn btn-success">Success</button>
				<button type="button" class="btn btn-success dropdown-toggle"
					data-toggle="dropdown" aria-expanded="false">
					<span class="caret"></span> <span class="sr-only">Toggle
						Dropdown</span>
				</button>
				<ul class="dropdown-menu" role="menu">
					<li><a href="#">Action</a></li>
					<li><a href="#">Another action</a></li>
					<li><a href="#">Something else here</a></li>
					<li class="divider"></li>
					<li><a href="#">Separated link</a></li>
				</ul>
			</div>
			<!-- /btn-group -->
			<div class="btn-group">
				<button type="button" class="btn btn-info">Info</button>
				<button type="button" class="btn btn-info dropdown-toggle"
					data-toggle="dropdown" aria-expanded="false">
					<span class="caret"></span> <span class="sr-only">Toggle
						Dropdown</span>
				</button>
				<ul class="dropdown-menu" role="menu">
					<li><a href="#">Action</a></li>
					<li><a href="#">Another action</a></li>
					<li><a href="#">Something else here</a></li>
					<li class="divider"></li>
					<li><a href="#">Separated link</a></li>
				</ul>
			</div>
			<!-- /btn-group -->
			<div class="btn-group">
				<button type="button" class="btn btn-warning">Warning</button>
				<button type="button" class="btn btn-warning dropdown-toggle"
					data-toggle="dropdown" aria-expanded="false">
					<span class="caret"></span> <span class="sr-only">Toggle
						Dropdown</span>
				</button>
				<ul class="dropdown-menu" role="menu">
					<li><a href="#">Action</a></li>
					<li><a href="#">Another action</a></li>
					<li><a href="#">Something else here</a></li>
					<li class="divider"></li>
					<li><a href="#">Separated link</a></li>
				</ul>
			</div>
			<!-- /btn-group -->
			<div class="btn-group">
				<button type="button" class="btn btn-danger">Danger</button>
				<button type="button" class="btn btn-danger dropdown-toggle"
					data-toggle="dropdown" aria-expanded="false">
					<span class="caret"></span> <span class="sr-only">Toggle
						Dropdown</span>
				</button>
				<ul class="dropdown-menu" role="menu">
					<li><a href="#">Action</a></li>
					<li><a href="#">Another action</a></li>
					<li><a href="#">Something else here</a></li>
					<li class="divider"></li>
					<li><a href="#">Separated link</a></li>
				</ul>
			</div>
			<!-- /btn-group -->
		</div>
		{% highlight html %}
		<!-- Split button -->
		<div class="btn-group">
			<button type="button" class="btn btn-danger">Action</button>
			<button type="button" class="btn btn-danger dropdown-toggle"
				data-toggle="dropdown" aria-expanded="false">
				<span class="caret"></span> <span class="sr-only">Toggle
					Dropdown</span>
			</button>
			<ul class="dropdown-menu" role="menu">
				<li><a href="#">Action</a></li>
				<li><a href="#">Another action</a></li>
				<li><a href="#">Something else here</a></li>
				<li class="divider"></li>
				<li><a href="#">Separated link</a></li>
			</ul>
		</div>
		{% endhighlight %}

		<h3 id="btn-dropdowns-sizing">尺寸</h3>
		<p>按钮式下拉菜单适用所有尺寸的按钮。</p>
		<div class="bs-example" data-example-id="button-dropdown-sizing">
			<div class="btn-toolbar" role="toolbar">
				<div class="btn-group">
					<button class="btn btn-default btn-lg dropdown-toggle"
						type="button" data-toggle="dropdown" aria-expanded="false">
						Large button <span class="caret"></span>
					</button>
					<ul class="dropdown-menu" role="menu">
						<li><a href="#">Action</a></li>
						<li><a href="#">Another action</a></li>
						<li><a href="#">Something else here</a></li>
						<li class="divider"></li>
						<li><a href="#">Separated link</a></li>
					</ul>
				</div>
				<!-- /btn-group -->
			</div>
			<!-- /btn-toolbar -->
			<div class="btn-toolbar" role="toolbar">
				<div class="btn-group">
					<button class="btn btn-default btn-sm dropdown-toggle"
						type="button" data-toggle="dropdown" aria-expanded="false">
						Small button <span class="caret"></span>
					</button>
					<ul class="dropdown-menu" role="menu">
						<li><a href="#">Action</a></li>
						<li><a href="#">Another action</a></li>
						<li><a href="#">Something else here</a></li>
						<li class="divider"></li>
						<li><a href="#">Separated link</a></li>
					</ul>
				</div>
				<!-- /btn-group -->
			</div>
			<!-- /btn-toolbar -->
			<div class="btn-toolbar" role="toolbar">
				<div class="btn-group">
					<button class="btn btn-default btn-xs dropdown-toggle"
						type="button" data-toggle="dropdown" aria-expanded="false">
						Extra small button <span class="caret"></span>
					</button>
					<ul class="dropdown-menu" role="menu">
						<li><a href="#">Action</a></li>
						<li><a href="#">Another action</a></li>
						<li><a href="#">Something else here</a></li>
						<li class="divider"></li>
						<li><a href="#">Separated link</a></li>
					</ul>
				</div>
				<!-- /btn-group -->
			</div>
			<!-- /btn-toolbar -->
		</div>
		<!-- /example -->
		{% highlight html %}
		<!-- Large button group -->
		<div class="btn-group">
			<button class="btn btn-default btn-lg dropdown-toggle" type="button"
				data-toggle="dropdown" aria-expanded="false">
				Large button <span class="caret"></span>
			</button>
			<ul class="dropdown-menu" role="menu">...
			</ul>
		</div>

		<!-- Small button group -->
		<div class="btn-group">
			<button class="btn btn-default btn-sm dropdown-toggle" type="button"
				data-toggle="dropdown" aria-expanded="false">
				Small button <span class="caret"></span>
			</button>
			<ul class="dropdown-menu" role="menu">...
			</ul>
		</div>

		<!-- Extra small button group -->
		<div class="btn-group">
			<button class="btn btn-default btn-xs dropdown-toggle" type="button"
				data-toggle="dropdown" aria-expanded="false">
				Extra small button <span class="caret"></span>
			</button>
			<ul class="dropdown-menu" role="menu">...
			</ul>
		</div>
		{% endhighlight %}

		<h3 id="btn-dropdowns-dropup">向上弹出式菜单</h3>
		<p>给父元素添加<code>.dropup</code>类就能使触发的下拉菜单朝上方打开。</p>
		<div class="bs-example" data-example-id="button-dropdown-dropup">
			<div class="btn-toolbar" role="toolbar">
				<div class="btn-group dropup">
					<button type="button" class="btn btn-default">Dropup</button>
					<button type="button" class="btn btn-default dropdown-toggle"
						data-toggle="dropdown" aria-expanded="false">
						<span class="caret"></span> <span class="sr-only">Toggle
							Dropdown</span>
					</button>
					<ul class="dropdown-menu" role="menu">
						<li><a href="#">Action</a></li>
						<li><a href="#">Another action</a></li>
						<li><a href="#">Something else here</a></li>
						<li class="divider"></li>
						<li><a href="#">Separated link</a></li>
					</ul>
				</div>
				<!-- /btn-group -->
				<div class="btn-group dropup">
					<button type="button" class="btn btn-primary">Right dropup</button>
					<button type="button" class="btn btn-primary dropdown-toggle"
						data-toggle="dropdown" aria-expanded="false">
						<span class="caret"></span> <span class="sr-only">Toggle
							Dropdown</span>
					</button>
					<ul class="dropdown-menu dropdown-menu-right" role="menu">
						<li><a href="#">Action</a></li>
						<li><a href="#">Another action</a></li>
						<li><a href="#">Something else here</a></li>
						<li class="divider"></li>
						<li><a href="#">Separated link</a></li>
					</ul>
				</div>
				<!-- /btn-group -->
			</div>
		</div>
		<!-- /example -->
		{% highlight html %}
		<div class="btn-group dropup">
			<button type="button" class="btn btn-default">Dropup</button>
			<button type="button" class="btn btn-default dropdown-toggle"
				data-toggle="dropdown" aria-expanded="false">
				<span class="caret"></span> <span class="sr-only">Toggle
					Dropdown</span>
			</button>
			<ul class="dropdown-menu" role="menu">
				<!-- Dropdown menu links -->
			</ul>
		</div>
		{% endhighlight %}
	</div>

</body>
</html>
